<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM(针对页面操作)+BOM(针对浏览器)
		        学习主体：针对页面操作比较多---DOM操作
				JQuery操作DOM：理解：JQ框架改变页面内容效果
				js基础就可以直接学习，了解函数使用
				基础函数----事件源之后出现，事件源语法糖中
				       1.html()--增加一个元素，覆盖原有html
					   2.val()--针对input元素，修改文本框内容
					   3.text()--生成一个文本内容
		 -->
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div {
				width: 200px;
				height: 200px;
				background: #000000;
			}
		</style>
	</head>
	<body>
		<!-- 实现：鼠标点击按钮，改变产生一行文本 -->
		<button>按钮</button>
		<p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique voluptas ex culpa mollitia
			id impedit consectetur cum minima, eaque minus commodi facere odit obcaecati ipsum adipisci eligendi,
			ducimus ea deleniti.</p>

		<div></div>
		<p class="color">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque vitae quibusdam quas magni,
			beatae placeat aliquam modi ipsam voluptatum. Placeat fugiat delectus repellat temporibus suscipit magni
			excepturi ullam animi. Sapiente?</p>

		<input type="button" value="按钮2" />
		<input type="text" />

		<script>
			$("button").click(function() {
				/* JQ操作DOM--html()函数使用 */
				$(".lorem").html("<h1>JQ操作DOM</h1>");
			});
			/* 练习1.div 200*200 背景颜色black 鼠标滑过 下方文本内容修改为自定颜色<h3> */
			$("div").mouseenter(function() {
				$(".color").html("<h3>修改为自定颜色</h3>");
			});
			/* 练习2.按钮 文本框 点击按钮 文本框增加一行文本 */
			$("input[type='button']").click(function() {
				$("input[type='text']").val("文本框内容修改");
			});
			/* 利用JQuery操作DOM（页面效果）---1.元素内容操作 ---3个函数
			                                   html()
											   val()
											   text()
			                                 2.属性操作 ---4个函数
											   <p align="center">
											   attr()
											   removerAttr()
											   <input checked>
											   prop()
											   removeProp()
											 3.样式类名操作 ---4个函数
											   .demo{属性：属性值..}
											   addClass()
											   removeClass()
											   toggleClass()
											   hasClass()
											 4.元素样式操作 ---5个函数
											   css()
											   语法：css("css属性","css属性值")
											   $("选择器").attr().addClass()
											 5.插入和删除修改操作 ---7个函数
											 append()和 prepend()
											 after()和 before()
											 remove()和 empty()
											 replaceWith()
											 6.元素遍历操作 ---6个函数
											 7.JQ动画操作 ---7个函数
			 */
		</script>
	</body>
</html>